<template>
	<view class="qrCode-Container Column">
		<view class="content Column">
			<image :src="qrCode" mode="aspectFit" />

			<view class="yuanLeft"></view>
			<view class="yuanRight"></view>

			<view class="copyCode">
				<view class="num" :data-text="inviter_code" @click="copy">点击复制 {{inviter_code}}<u-toast
						ref="uToast"></u-toast></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiInviterQrcode
	} from '@/api/home.js';

	export default {
		data() {
			return {
				qrCode: '',
				inviter_code: '',
			}
		},
		methods: {
			copy(e) {
				let that = this;
				let text = e.currentTarget.dataset.text;
				uni.setClipboardData({
					data: text.toString(),
					// showToast: false,
					success: function(res) {
						console.log("复制成功")
						// that.$refs.uToast.show({
						// 	type: 'success',
						// 	message: "复制成功",
						// })
					}
				});
			},

			getUserInfo() {
				let that = this;
				uni.$u.http.post('/user/getUserInfo').then(res => {
					that.inviter_code = res.data.userinfo.inviter_code;
					// console.log(res.data.userinfo.inviter_code)
				}).catch(err => {
					console.log(err)
				})
			},

			getInviterQrcode() {
				let that = this;
				const accountInfo = wx.getAccountInfoSync();
				uni.request({
					url: 'https://pcdn.hbkfu.com/api/user/inviterQrcode',
					method: 'GET',
					header: {
						token: uni.getStorageSync('token')
					},
					data: {
						env_version: accountInfo.miniProgram.envVersion
					},
					responseType: 'arraybuffer',
					success: (res) => {
						that.qrCode = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data)
					},
					fail: () => {
						uni.showToast({
							title: '网络异常',
							icon: 'none'
						})
					}
				})
			}
		},
		onShow() {
			this.getUserInfo();
			this.getInviterQrcode();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f9f9f9;
	}

	.qrCode-Container {
		justify-content: center;
		align-items: center;
		height: 86vh;
		padding: 24px;

		.content {
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 1px 1px 10px #e7e7e7;
			margin-bottom: 12px;
			padding: 52px 24px 24px;
			position: relative;

			.copyCode {
				text-align: center;
				width: 94%;
				border-top: 1px dashed #d2d2d2;
				margin-top: 24px;
				padding-top: 24px;

				.num {
					color: #fff;
					font-size: 18px;
					border-radius: 50rpx;
					background-color: #0093E9;
					padding: 6px 40rpx;
				}
			}

			.yuanLeft,
			.yuanRight {
				border-radius: 100px;
				background-color: #f9f9f9;
				padding: 12px;
				position: absolute;
			}

			.yuanLeft {
				left: -10px;
				bottom: 74px;
			}

			.yuanRight {
				right: -10px;
				bottom: 74px;
			}
		}
	}
</style>